<!-- 已售空商品 -->
<template>
  <div class="box">
    <div class="fun">
          <div class="classify">
            <span>商品分类:</span>
            <el-select
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search">
            <span>商品搜索:
              <el-input
                v-model="input"
                placeholder="请输入商品名称、关键字、商品Id"
                @change="inputchange"
              />
            </span>
          </div>
        </div>
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column fixed prop="id" label="Id" width="150" />
      <el-table-column fixed label="商品图" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="200" />
      <el-table-column fixed prop="price" label="商品售价" width="200" />
      <el-table-column fixed prop="sales" label="销量" width="120" />
      <el-table-column fixed prop="inventory" label="库存" width="120" />
      <el-table-column fixed prop="rank" label="排序" width="120" />
      <el-table-column fixed label="状态" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            style="width: 180px;"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="上架"
            inactive-text="下架"
          />
        </template>
      </el-table-column>
      <el-table-column fixed prop="data" label="操作时间" width="120" />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope" width="300">
          <el-button type="text" size="small" @click="handleClick(scope.row)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteClick(scope.$index, scope.row)"
          >
            恢复
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteClick(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="form">
        <el-form-item
          label="商品名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="editInfo.name"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="商品售价"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="editInfo.price"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="销量"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="editInfo.sales"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="sureEdit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from "@/api/datalist";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [],
      pageSize: 6,
      pageIndex: 1,
      dialogVisible: false, //控制编辑弹框,
      total: 0,
      value:'',
      input: "",
       form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      editInfo: {}, //存放编辑数据,
      //模糊搜索数组
      newList: [],
      options: [
        {
          value: "all",
          label: "每日有限"
        },
        {
          value: "one",
          label: "时尚家居"
        },
        {
          value: "two",
          label: "手机"
        },
        {
          value: "tree",
          label: "精选推荐"
        },
        {
          value: "four",
          label: "数码商品"
        },
        {
          value: "five",
          label: "电脑"
        }
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    async getList() {
      const res = await fetchList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      });
      this.tableData = res.data.sort((a, b) => {
        return b.rank - a.rank;
      });
      this.total = res.total;
      console.log(res, "Res");
    },
    handleCurrentChange(val) {
      console.log(val, "val");
      this.pageIndex = val;
      this.getList();
    },
    //模糊搜索
    inputchange(e) {
      console.log(e);
      this.newList = this.tableData.filter(item => {
        return item.name.includes(e) || item.id === e;
      });
    },
     handleClick(row) {
      console.log(row, "22");
      this.dialogVisible = true;
      this.editInfo = { ...row };
    },
    //删除
    deleteClick(index) {
      console.log(index);
      this.tableData.splice(index, 1);
    },
    //编辑框确定按钮
    sureEdit() {
      console.log(this.editInfo, 3);
      this.dialogVisible = false;
      this.tableData.forEach((item, index) => {
        if (item.id === this.editInfo.id) {
          this.$set(this.tableData, index, this.editInfo);
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.fun {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 0 30px;
}
.classify {
  margin-right: 50px;
}
.search .el-input {
  width: 200px;
}
</style>
